<template>
  <scroll-view class="album-scroll-view" scroll-y @scrolltolower="handTolower">
    <!-- 轮播图 -->
    <!-- swiper三大件：autoplay  indicator-dots（指示点）circular（衔接滑动） -->
    <swiper class="album-swiper" autoplay indicator-dots circular>
      <swiper-item v-for="item in banner" :key="item.id">
        <image :src="item.thumb" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <!-- 列表 -->
    <view class="album-list">
      <navigator class="album-item" v-for="item in album" :key="item.id"
        :url="`/pages/album/index?id=${item.id}`">
        <view class="album-img">
          <image :src="item.cover" mode="aspectFill"></image>
        </view>
        <view class="album-info">
          <view class="album-name">{{item.name}}</view>
          <view class="album-desc">{{item.desc}}</view>
          <view class="album-btn">
            <view class="album-attention">关注</view>
          </view>
        </view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
/**
 * 1 使用 setNavigationBarTitle 动态修改页面标题
 * 2 发送请求获取数据
 * 3 使用 swiper 轮播图组件
 * 4 使用 scroll-view 组件实现滚动分页
 * 5 点击跳转到 专辑详情页
 */
export default {
  data() {
    return {
      // 专辑接口请求参数
      params: {
        limit: 30,
        order: 'new',
        skip: 0
      },
      // 轮播图数组
      banner: [],
      // 列表数组
      album: [],
      // 是否还有分页数据
      hasMore: true
    }
  },
  methods: {
    // 获取接口数据
    async getList() {
      const res = await this.request({
        url: 'http://157.122.54.189:9088/image/v1/wallpaper/album',
        data: this.params
      })
      if (this.banner.length === 0) {
        this.banner = [...this.banner, ...res.res.banner]
      }
      if (res.res.album.length === 0) {
        this.hasMore = false
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
        return
      }
      this.album = [...this.album, ...res.res.album]
    },
    // 上拉触底事件，分页
    // 没有更多数据时，要经过getList()才能修改hasMore的值，如果getList里没有判断显示  "没有更多"
    // 则再次触底时才会显示 "没有更多"
    // 所以第一次的 "没有更多了~" 需要在getList里判断显示
    handTolower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit
        this.getList()
      } else {
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
      }
    }
  },
  mounted() {
    // 动态修改当前页面的标题
    uni.setNavigationBarTitle({
      title: '专辑'
    })
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.album-scroll-view {
  height: calc(100vh - 36px);
}
.album-swiper {
  width: 100%;
  height: calc(100vw * 284 / 640);
}
.album-list {
  padding: 10rpx;
  .album-item {
    display: flex;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #ccc;
    .album-img {
      flex: 1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 5rpx;
      }
    }

    .album-info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .album-name {
        font-size: 30rpx;
        color: #000;
      }

      .album-desc {
        margin: 10rpx 0;
        font-size: 24rpx;
        // 两行显示文本，多出的文本省略号表示
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .album-btn {
        display: flex;
        padding: 10rpx;
        justify-content: flex-end;
        .album-attention {
          padding: 8rpx 15rpx;
          color: $theme-color;
          border: 1rpx solid $theme-color;
          border-radius: 5rpx;
        }
      }
    }
  }
}
</style>